<template>
  <div>
    <el-skeleton class="pd-r12 pd-t5" :loading="loading" animated>
      <template #template>
        <el-skeleton :rows="10" />
      </template>
      <template #default>
        <div v-for="item in albumData" :key="item.id" class="d-flex a-center">
          <div style="width: 50px; height: 50px"></div>
          <div>{{ item.albumName }}</div>
          <div>{{ item.singerName }}</div>
          <div>{{ item.issueDate }}</div>
          <div>100首</div>
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup lang="ts">
  import { ref, inject, watch } from 'vue'
  import type { Ref } from 'vue'
  import { getAlbumSerch } from '@/api/search'
  import useLoading from '@/hooks/useLoading'
  // eslint-disable-next-line no-undef
  defineOptions({
    name: 'AlbumSearch'
  })
  const { loading, openLoad, closeLoad } = useLoading()
  const searchKey = inject<Ref<string>>('searchKey')
  const albumData = ref<any>([])
  const getSongData = () => {
    openLoad()
    getAlbumSerch({
      searchKey: searchKey?.value
    }).then(res => {
      albumData.value = res
      closeLoad()
    })
  }

  if (searchKey) {
    watch(
      searchKey,
      newValue => {
        console.log(newValue)
        getSongData()
      },
      { deep: true, immediate: true }
    )
  }
</script>
